<template>
  <div>
    <h2>侦听器</h2>
    请输入问题: <input type="text" v-model="question" />
    <div>{{ anwser }}</div>
    <hr />
    <h3>侦听器的配置选项-handler配置</h3>
    <h2>{{ info.name }}</h2>
    <h2>{{ info.book.name }}</h2>
    <button @click="changeInfo">改变info</button>
    <button @click="changeInfoName">改变info.name</button>
    <button @click="changeInfoBookName">改变info.book.name</button>
    <hr />
    <div>
      <p>
        watchEffect
        也是一个帧听器，是一个副作用函数它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听
      </p>
      <input type="text" v-model="effectValue" />
      <button @click="stopWatchEffect">停止监听</button>
    </div>
  </div>
</template>

<!-- <script>
export default {
  name: 'ztq',
  data() {
    return {
      // 1.需求：侦听question的变化时, 去进行一些逻辑的处理(JavaScript, 网络请求)
      question: '',
      anwser: '',
      info: { name: '张三', age: 18, book: { name: 'Vue.js2' } }
    }
  },
  // 2.侦听器
  watch: {
    // 3.侦听question的变化
    // question ：侦听的data中的属性的名称
    // newValue ：变化后的新值
    // oldValue ：变化前的旧值
    question(newValue, oldValue) {
      console.log('question新值: ', newValue, 'question旧值', oldValue)
      // 4.question 变化后调用 queryAnswer() 方法
      this.queryAnswer()
    },
    // 侦听info对象的更新
    info: {
      handler: function (newInfo, oldInfo) {
        console.log('info新值:', newInfo, 'info旧值:', oldInfo)
      },
      // 深度侦听 info 对象的更新（info内部发生的改变是可以侦听到的）,改为true
      deep: false,
      immediate: false // 让handler中定义的函数 立即执行一次默认false
    }
  },
  methods: {
    queryAnswer() {
      this.anwser = `你的问题是：${this.question}? 答案：哈哈哈哈!`
    },
    changeInfo() {
      this.info = { name: 'kobe', age: 18, book: { name: 'vue.js3' } }
    },
    changeInfoName() {
      this.info.name = 'rose'
    },
    changeInfoBookName() {
      this.info.book.name = 'React'
    }
  }
}
</script> -->

<script setup>
defineOptions({
  name: 'ztq'
})
import { ref, watch, reactive, watchEffect } from 'vue'
const question = ref('')
const anwser = ref('')
let info = reactive({ name: '张三', age: 18, book: { name: 'Vue.js2' } })

watch(question, (newValue, oldValue) => {
  console.log('question新值: ', newValue, 'question旧值', oldValue)
  // 4.question 变化后调用 queryAnswer() 方法
  queryAnswer()
})

watch(
  info,
  (newInfo, oldInfo) => {
    console.log('info新值:', newInfo, 'info旧值:', oldInfo)
  },
  {
    deep: false,
    immediate: true
  }
)
// 监听单个属性
watch(
  () => info.name,
  (newName, oldName) => {
    console.log('info.name新值:', newName, 'info.name旧值:', oldName)
  },
  {
    deep: false,
    immediate: false
  }
)
// 监听多个响应式数据数据
watch([() => info.name, question], (newVal) => {
  console.log('监听多个响应式数据数据值改变了：', newVal)
})
const queryAnswer = () => {
  anwser.value = `你的问题是：${question.value}? 答案：哈哈哈哈!`
}

const changeInfo = () => {
  info = Object.assign(info, { name: 'kobe', age: 18, book: { name: 'vue.js3' } })
}
const changeInfoName = () => {
  info.name = 'rose'
}
const changeInfoBookName = () => {
  info.book.name = 'React'
}
// watchEffect
const effectValue = ref('')
const stop = watchEffect(() => {
  console.log('effectValue:', effectValue.value)
})
const stopWatchEffect = () => {
  console.log('停止监听')
  stop()
}
</script>
